<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            margin: 50px auto 0;
            display: block;
            background: yellow;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
</canvas>
</body>
</html>
<script>
    const ctx = document.getElementById('canvas')
    const gl = ctx.getContext('webgl')

    const VERTEX_SHADER_SORUCE = `
    attribute vec4 aPosition;
    attribute vec4 aColor;
    varying vec4 vColor;
    uniform mat4 mat;
    void main(){
      gl_Position = mat * aPosition;
      vColor = aColor;
    }
  `;
    const FRAGEMNT_SHADER_SOURCE = `
    precision lowp float;
    varying vec4 vColor;
    void main(){
      gl_FragColor = vColor;
    }
  `;
    // 封装后
    const program = initShader(gl, VERTEX_SHADER_SORUCE, FRAGEMNT_SHADER_SOURCE)
    const aPosition = gl.getAttribLocation(program, 'aPosition')
    const aColor = gl.getAttribLocation(program, 'aColor')
    const mat = gl.getUniformLocation(program, 'mat')

    // 顶点数据
    const vertices = new Float32Array([
        // 0123
        1, 1, 1,
        -1, 1, 1,
        -1,-1, 1,
        1,-1, 1,
        // 0345
        1, 1, 1,
        1,-1, 1,
        1,-1,-1,
        1, 1,-1,
        // 0156
        1, 1, 1,
        1, 1, -1,
        -1, 1,-1,
        -1, 1,1,
        // 1267
        -1, 1, 1,
        -1,1, -1,
        -1, -1,-1,
        -1,-1,1,
        // 2347
        -1,-1, 1,
        1,-1, 1,
        1,-1,-1,
        -1,-1,-1,
        // 4567
        1,-1,-1,
        1, 1,-1,
        -1, 1,-1,
        -1,-1,-1,
    ])
    const buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
    gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0)
    gl.enableVertexAttribArray(aPosition)

    const colors = new Float32Array([
        0.4,0.4,1.0,0.4,0.4,1.0,0.4,0.4,1.0,0.4,0.4,1.0,
        0.4,1.0,0.4,0.4,1.0,0.4,0.4,1.0,0.4,0.4,1.0,0.4,
        1.0,0.4,0.4,1.0,0.4,0.4,1.0,0.4,0.4,1.0,0.4,0.4,
        1.0,1.0,0.4,1.0,1.0,0.4,1.0,1.0,0.4,1.0,1.0,0.4,
        1.0,0.0,1.0,1.0,0.0,1.0,1.0,0.0,1.0,1.0,0.0,1.0,
        0.0,1.0,1.0,0.0,1.0,1.0,0.0,1.0,1.0,0.0,1.0,1.0,
    ])
    const colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer)
    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW)
    gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, 0, 0)
    gl.enableVertexAttribArray(aColor)

     const indeces = new Uint8Array([
         0,1,2,0,2,3,
         4,5,6,4,6,7,
         8,9,10,8,10,11,
         12,13,14,12,14,15,
         16,17,18,16,18,19,
         20,21,22,20,22,23,
     ])
    const indexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer)
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indeces, gl.STATIC_DRAW)

    let evex = 3
    let evey = 3
    let evez = 5

    let deg = 0

    function draw() {
        deg += 0.01;
        const rotate = getRotateMatrix(deg)
        const vm = getViewMatrix(evex, evey, evez, 0.0, 0.0, 0.0, 0.0, 0.6, 0.0)
        const perspective = getPerspective(30, ctx.width / ctx.height, 100, 1);
        gl.enable(gl.DEPTH_TEST);
        gl.uniformMatrix4fv(mat, false, mixMatrix(mixMatrix(perspective, vm), rotate))
        gl.drawElements(gl.TRIANGLES, indeces.length, gl.UNSIGNED_BYTE,0);
        requestAnimationFrame(draw)
    }

    draw()

    document.onkeydown = function (e) {
        switch (e.keyCode) {
            case 37:
                evex += 0.01;
                break;
            case 38:
                evex -= 0.01;
                break;
            case 39:
                evey += 0.01;
                break;
            case 40:
                evey -= 0.01;
                break;
        }
        draw()
    }

</script>
